<template>
    <div class="header-bar">
        <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
        <custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb>
        <div v-if="AuthorityList.includes('teacher')" class="mydiv">
            <router-link to="/teacherSupervisionHome">
                <h4>
                    <Badge v-if="AnnouncementList!=null && AnnouncementList.length > 0"  class-name="Badge" :count="AnnouncementList.length">
                        教师督导</Badge>
                  <span v-else>教师督导</span>
                </h4>
            </router-link>
        </div>
        <div class="custom-content-con">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    import siderTrigger from './sider-trigger'
    import customBreadCrumb from './custom-bread-crumb'
    import './header-bar.less'

    export default {
        name: 'HeaderBar',
        components: {
            siderTrigger,
            customBreadCrumb
        },
        props: {
            collapsed: Boolean
        },
        computed: {
            breadCrumbList() {
                return this.$store.state.app.breadCrumbList
            },
            AnnouncementList() {
                return this.MySocket.state.userMsg
            },
          AuthorityList(){
              return this.$store.state.user.user.AuthorityList
            }
        },
        methods: {
            handleCollpasedChange(state) {
                this.$emit('on-coll-change', state)
            }
        },
    }
</script>
<style>
    .mydiv {
        position: absolute;
        top: 0px;
        right: 240px;
    }

    .Badge {
        margin-top: 14px;
    }
</style>
